<template>
  <div class="reg">
    <div>
      <top></top>
    </div>
    <div style="right: 500px;position: absolute;top: 150px; width: 400px; background: #F8F8FF; margin: 50px auto; padding: 30px 60px;">
      <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="账号登录" name="second">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="number">
              <el-input style="width: 300px" v-model="ruleForm.phone" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input style="width: 300px" v-model="ruleForm.password"placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 300px;border-radius: 50px;background-color: #FF6100"type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>


        <el-tab-pane label="手机账号登录" name="first">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="phone">
              <el-input style="width: 300px" v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verificationCode">
              <el-input style="width: 200px; position: absolute; left: 0" v-model="ruleForm.verificationCode" placeholder="请输入短信验证码">
              </el-input>
              <el-button style="float: right;background-color: #999;color: black" type="primary">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input style="width: 300px" v-model="ruleForm.password"placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 300px;border-radius: 50px;background-color: #FF6100" type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
      <div>

        <a href="/reg" style="float: right">注册账号<i class="el-icon-arrow-right"></i></a>
      </div>
    </div>
    <foot style="position: absolute;top: 550px"></foot>
  </div>
</template>

<script>
import top from "@/page/top";
import foot from "@/page/foot";
export default {
  components: {
    top,foot
  },
  data() {
    return {
      ruleForm: {
        phone: '',
        verificationCode: '',
        password: '',
      },
      activeName: 'second',
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 11, message: '长度为11位', trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log("当前activeName=", this.activeName)
      console.log("当前name=", tab.name)
      sessionStorage.setItem('current_name', tab.name)
    },
    created() {
      console.log("获取缓存前，activeName=", this.activeName)

      if (sessionStorage.getItem('current_name') == null){
        this.activeName = 'first'
      }else{
        this.activeName = sessionStorage.getItem('current_name')
      }

      console.log("获取缓存后，activeName=", this.activeName)

    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9100/reg';
          this.axios.post(url, this.ruleForm).then((response) => {
            // console.log(response);
            if (response.data == 1) {
              // console.log('登录成功！');
              this.$message({
                message: '登录成功！',
                type: 'success'
              });
            } else if (response.data == 2) {
              // console.log('登录失败，用户名错误！');
              this.$message.error('登录失败，用户名错误！');
            } else {
              // console.log('登录失败，密码错误！');
              this.$message.error('登录失败，密码错误！');
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
